<template>
  <div class="left-tool">
    <div
      v-if="isShowContain"
      class="popContainer"
    >
      <div class="text">
        <div class="circle-style" />
        <!-- 资源查询中 -->
      </div>
    </div>
    <div class="title">
      资源展示
    </div>
    <div class="switch-style">
      <!-- <el-switch
        v-model="chakan"
        size="small"
        :disabled="disableRadio"
        :width="35"
        active-color="#50BDDC"
        active-text="查勘"
      /> -->
      <el-switch
        v-model="sheji"
        :disabled="disableRadio"
        size="small"
        :width="35"
        active-color="#50BDDC"
        active-text="设计"
      />
      <!-- <el-switch
        v-model="gongcheng"
        size="small"
        :width="35"
        active-color="#50BDDC"
        active-text="工程"
      /> -->
    </div>
    <div class="label-class">
      <div
        v-for="res in resArray"
        v-show="res.isShow"
        :key="res.resId"
        class="label-item"
      >
        <Label
          :name="res.resName"
          :is-select="res.isSelect"
          @select="selected"
          @no-select="noselected"
        />
      </div>
    </div>
    <div class="title">
      图层资源概览
    </div>
    <div class="collapse-style">
      <el-collapse
        v-model="resActionName"
        accordion
      >
        <div
          v-for="item in ResData"
          :key="item.id"
        >
          <ResTree
            :title="item.title"
            :index="item.id"
            :total="item.total"
            :tree-data="item.treeData"
            @select-item="onResSelect"
          />
        </div>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import _ from 'lodash';
import { queryAllGisDataInfo, queryFormDataInfo } from '@/api/service/gisShow2020';
import Label from './components/Label.vue';
import ResTree from './components/ResTree.vue';

export default {
  name: 'LeftTool',
  components: {
    Label,
    ResTree,
  },
  props: {
    planId: {
      type: String,
      default: '',
    },
    checkId: {
      type: String,
      default: '',
    },
    selectData: {
      type: Object,
      default: () => {},
    },
    localConfig: {
      type: Object,
      default: () => {},
    },
    mapClick: {
      type: Object,
      default: () => {},
    },
    isCheck: {
      type: Number,
      default: null,
    },
    changeImagedata: {
      type: Boolean,
      default: null,
    },
    selectFlag: {
      type: Boolean,
      default: null,
    },
  },
  data() {
    return {
      // 控制单选按钮
      disableRadio: true,
      //
      layerArray: [],
      // 查勘按钮
      chakan: false,
      sheji: true,
      gongcheng: false,
      // 资源类别
      resArray: [
        {
          resId: 1,
          isSelect: true,
          isShow: false,
          type: 'renshoujing',
          resName: '人井',
        },
        {
          resId: 2,
          isSelect: true,
          isShow: false,
          type: 'diangan',
          resName: '电杆',
        },
        {
          resId: 3,
          isSelect: true,
          isShow: false,
          type: 'biaoshi',
          resName: '标石',
        },
        {
          resId: 4,
          isSelect: true,
          isShow: false,
          type: 'chengdian',
          resName: '撑点',
        },
        {
          resId: 5,
          isSelect: true,
          isShow: false,
          type: 'guangjiaojiexiang',
          resName: '光交',
        },
        {
          resId: 6,
          isSelect: true,
          isShow: false,
          type: 'guangfenxianxiang',
          resName: '光分',
        },
        {
          resId: 7,
          isSelect: true,
          isShow: false,
          type: 'guangzhongduanhe',
          resName: '终端盒',
        },
        {
          resId: 8,
          isSelect: true,
          isShow: false,
          type: 'guangjietouhe',
          resName: '接头盒',
        },
        {
          resId: 9,
          isSelect: true,
          isShow: false,
          type: 'guandaoduan',
          resName: '管道段',
        },
        {
          resId: 10,
          isSelect: true,
          isShow: false,
          type: 'zhimaiduan',
          resName: '直埋段',
        },
        {
          resId: 11,
          isSelect: true,
          isShow: false,
          type: 'ganluduan',
          resName: '杆路段',
        },
        {
          resId: 12,
          isSelect: true,
          isShow: false,
          type: 'guaqiangduan',
          resName: '挂墙段',
        },
        {
          resId: 13,
          isSelect: true,
          isShow: false,
          type: 'yinshangduan',
          resName: '引上段',
        },
        {
          resId: 14,
          isSelect: true,
          isShow: false,
          type: 'guanglanduan',
          resName: '光缆段',
        },
      ],
      // 资源系统绑定
      resActionName: '',
      dataList: [],

      isShowContain: false,
      ResData: [],
      // ziuyanbiaoqianbangdingbuanhuan
      selectResChange: '',
      // ziyuanid
      resId: '',
      // 第二次地图数据
      secondTable: [],
      initLayerArray: [],
      selectResType: '',
    };
  },
  watch: {
    // localConfig() {
    //   this.mapData();
    //   this.dataDeal();
    // },
    selectFlag() {
      if (this.selectData.id !== null && this.selectData.id !== undefined) {
        this.selectResId(this.selectData.id);
        // this.selectData = {};
      }
    },
    changeImagedata() {
      this.changeImage();
      this.selectResId(this.checkId);
    },
    mapClick() {
      // this.changeImage();
      this.selectResId(this.mapClick.id);
    },
    chakan() {
      this.layerCol();
      this.clearHighImg();
    },
    sheji() {
      this.layerCol();
      this.clearHighImg();
    },
    gongcheng() {
      this.layerCol();
      this.clearHighImg();
    },
    selectResChange() {
      this.clearHighImg();
      this.layerCol();
    },
    resId() {
      this.selectResId(this.resId);
    },
  },
  created() {
    this.mapData();
    this.dataDeal();
    this.initBusListener();
  },
  methods: {
    // 改变审核图标
    changeImage() {
      const that = this;
      const List = [];
      that.dataList.forEach((data) => {
        const resmapdata = {};
        if (
          data.id === that.checkId
          && data.shape.type === 'Point'
          && data.type.indexOf('gongcheng') > 0
        ) {
          if (this.isCheck !== 0) {
            const type = `${data.res_type}_gongcheng`;
            const pass = JSON.stringify(that.localConfig.symbolConfig[type]);
            resmapdata.id = data.id;
            resmapdata.type = type;
            resmapdata.symbol = JSON.parse(pass);
          } else {
            // const type = `${data.res_type}_gongcheng`;
            const nopass = JSON.stringify(that.localConfig.symbolConfig[data.res_type]);
            resmapdata.id = data.id;
            resmapdata.type = data.type;
            resmapdata.symbol = JSON.parse(nopass);
          }
        }
        if (
          data.id === that.checkId
          && data.shape.type === 'LineString'
          && data.type.indexOf('gongcheng') > 0
        ) {
          if (this.isCheck !== 0) {
            const linesymbol = {
              style: 'STYLE_SOLID',
              color: '#f39c12',
              width: 2,
            };
            resmapdata.id = data.id;
            resmapdata.type = data.type;
            resmapdata.symbol = linesymbol;
          } else {
            // const type = `${data.res_type}_gongcheng`;
            const linesymbol = {
              style: 'STYLE_SOLID',
              color: '#F8220B',
              width: 2,
            };
            resmapdata.id = data.id;
            resmapdata.type = data.type;
            resmapdata.symbol = linesymbol;
          }
        }
        if (
          data.id === that.checkId
          && data.shape.type === 'MultiLineString'
          && data.type.indexOf('gongcheng') > 0
        ) {
          if (this.isCheck !== 0) {
            const linesymbol = {
              style: 'STYLE_SOLID',
              color: '#f39c12',
              width: 3,
            };
            resmapdata.id = data.id;
            resmapdata.type = data.type;
            resmapdata.symbol = linesymbol;
          } else {
            // const type = `${data.res_type}_gongcheng`;
            const linesymbol = {
              style: 'STYLE_SOLID',
              color: '#F8220B',
              width: 3,
            };
            resmapdata.id = data.id;
            resmapdata.type = data.type;
            resmapdata.symbol = linesymbol;
          }
        }
        if (resmapdata.id && resmapdata.symbol) {
          List.push(resmapdata);
        }
      });

      if (List.length > 0) {
        this.vaMapAdv.doDynamicLayerChangeSymbol(List);
        List.forEach((res) => {
          const newDataList = [];
          this.dataList.forEach((data) => {
            const datachange = data;
            if (data.id === res.id && data.type === res.type) {
              datachange.symbol = JSON.stringify(res.symbol);
            }
            newDataList.push(datachange);
          });
          this.dataList = newDataList;
        });
      }
    },
    // 点击节点
    selectResId(id) {
      const that = this;
      const list = [];
      that.dataList.forEach((data) => {
        const resmapdata = {};
        if (data.id === id && data.type.indexOf('gongcheng') > 0) {
          that.selectResType = data.res_type;
          if (that.isCheck !== 0) {
            const a = data.symbol.split('.png');
            if (a.length === 2) {
              if (a[0].indexOf('高亮') > -1) {
                const newsymbol = `${a[0]}.png${a[1]}`;
                const gaoliangsymbol = JSON.parse(newsymbol);
                resmapdata.symbol = gaoliangsymbol;
                resmapdata.symbol.width = gaoliangsymbol.width;
                resmapdata.symbol.height = gaoliangsymbol.height;
                console.log(resmapdata.symbol);
              } else {
                const newsymbol = `${a[0]}高亮.png${a[1]}`;
                const gaoliangsymbol = JSON.parse(newsymbol);
                resmapdata.symbol = gaoliangsymbol;
                resmapdata.symbol.width = gaoliangsymbol.width * 1.5;
                resmapdata.symbol.height = gaoliangsymbol.height * 1.5;
                console.log(resmapdata.symbol);
              }

              // resmapdata.symbol = JSON.parse(newsymbol);
            } else {
              resmapdata.symbol = {
                style: 'STYLE_SOLID',
                color: '#f39c12',
                width: 3,
              };
            }
            resmapdata.id = data.id;
            resmapdata.type = data.type;
            list.push(resmapdata);
          } else {
            const a = data.symbol.split('不通过.png');
            if (a.length === 2) {
              const newsymbol = `${a[0]}不通过高亮.png${a[1]}`;
              const gaoliangsymbol = JSON.parse(newsymbol);
              resmapdata.symbol = gaoliangsymbol;
              resmapdata.symbol.width = gaoliangsymbol.width * 1.5;
              resmapdata.symbol.height = gaoliangsymbol.height * 1.5;
              console.log(resmapdata.symbol);

              // resmapdata.symbol = JSON.parse(newsymbol);
            } else {
              resmapdata.symbol = {
                style: 'STYLE_SOLID',
                color: '#F8220B',
                width: 2,
              };
            }
            resmapdata.id = data.id;
            resmapdata.type = data.type;
            list.push(resmapdata);
          }
        }
      });
      if (list.length > 0) {
        this.vaMapAdv.doShowHlightDynamicLayer(list, { extentExpand: 1.5 });
        list.forEach((res) => {
          const newDataList = [];
          this.dataList.forEach((data) => {
            const datachange = data;
            if (data.id === res.id && data.type === res.type) {
              datachange.symbol = JSON.stringify(res.symbol);
            }
            newDataList.push(datachange);
          });
          this.dataList = newDataList;
        });
        this.$emit('high-over');
      } else {
        this.vaMapAdv.doHideHlightDynamicLayer();
      }
    },
    // 图层控制
    layerCol() {
      const layer = [];
      if (this.chakan) {
        let allres = false;
        this.resArray.forEach((res) => {
          if (res.isSelect) {
            allres = false;
            layer.push(`${res.type}_chakan`);
          }
        });
        if (allres) {
          this.resArray.forEach((res) => {
            layer.push(`${res.type}_chakan`);
          });
        }
      }
      if (this.sheji) {
        let allres = false;
        this.resArray.forEach((res) => {
          if (res.isSelect) {
            allres = false;
            layer.push(`${res.type}_sheji`);
          }
        });
        if (allres) {
          this.resArray.forEach((res) => {
            layer.push(`${res.type}_sheji`);
          });
        }
      }
      if (this.gongcheng) {
        let allres = false;
        this.resArray.forEach((res) => {
          if (res.isSelect) {
            allres = false;
            layer.push(`${res.type}_gongcheng`);
          }
        });
        if (allres) {
          this.resArray.forEach((res) => {
            layer.push(`${res.type}_gongcheng`);
          });
        }
      }
      this.layerArray = layer;
      this.initLayerArray = [];
      layer.forEach((LayName) => {
        this.initLayerArray.push({
          name: LayName,
        });
      });
      if (this.vaMapAdv) {
        this.vaMapAdv.doDynamicLayerFilterByType(layer);
      }
    },
    // 清除高亮
    clearHighImg() {
      if (!this.gongcheng || this.selectResChange.indexOf(this.selectResType) > -1) {
        this.vaMapAdv.doHideHlightDynamicLayer();
      }
    },
    // 处理地图数据
    async mapData() {
      const that = this;
      that.dataList = [];
      this.layerCol();
      this.isShowContain = true;
      const GCdata = await queryAllGisDataInfo(that.planId);
      // ------屏蔽
      // GCdata.data = that.localConfig.mapAllData;
      // -------
      if (GCdata.data.length > 0) {
        GCdata.data.forEach(async (map) => {
          const data = {};
          data.symbol = '';
          // const mapObj = new Map(Object.entries(that.localConfig.symbolConfig));
          const nopass = await JSON.stringify(that.localConfig.symbolConfig[map.res_type]);
          const pass = await JSON.stringify(that.localConfig.symbolConfig[map.type]);
          if (map.isNoPass === 'true') {
            data.id = map.id;
            data.name = map.name;
            data.type = map.type;
            data.res_type = map.res_type;
            data.shape = map.shape;
            data.shape_type = map.shape_type;
            data.symbol = nopass;
          } else {
            data.id = map.id;
            data.name = map.name;
            data.type = map.type;
            data.res_type = map.res_type;
            data.shape = map.shape;
            data.shape_type = map.shape_type;
            data.symbol = pass;
          }
          if (data.symbol === undefined && data.shape.type === 'LineString') {
            if (map.isNoPass === 'true') {
              const linesymbol = {
                style: 'STYLE_SOLID',
                color: '#F8220B',
                width: 2,
              };
              data.symbol = JSON.stringify(linesymbol);
            } else {
              if (data.type.indexOf('gongcheng') > 0) {
                const linesymbol = {
                  style: 'STYLE_SOLID',
                  color: '#f39c12',
                  width: 2,
                };
                data.symbol = JSON.stringify(linesymbol);
              }
              if (data.type.indexOf('sheji') > 0) {
                const linesymbol = {
                  style: 'STYLE_SOLID',
                  color: '#27B631',
                  width: 2,
                };
                data.symbol = JSON.stringify(linesymbol);
              }
              if (data.type.indexOf('chakan') > 0) {
                const linesymbol = {
                  style: 'STYLE_SOLID',
                  color: '#1B71E5',
                  width: 2,
                };
                data.symbol = JSON.stringify(linesymbol);
              }
            }
          } else if (data.symbol === undefined && data.shape.type === 'MultiLineString') {
            if (map.isNoPass === 'true') {
              const linesymbol = {
                style: 'STYLE_SOLID',
                color: '#F8220B',
                width: 2,
              };
              data.symbol = JSON.stringify(linesymbol);
            } else {
              if (data.type.indexOf('gongcheng') > 0) {
                const linesymbol = {
                  style: 'STYLE_SOLID',
                  color: '#f39c12',
                  width: 3,
                };
                data.symbol = JSON.stringify(linesymbol);
              }
              if (data.type.indexOf('sheji') > 0) {
                const linesymbol = {
                  style: 'STYLE_SOLID',
                  color: '#27B631',
                  width: 3,
                };
                data.symbol = JSON.stringify(linesymbol);
              }
              if (data.type.indexOf('chakan') > 0) {
                const linesymbol = {
                  style: 'STYLE_SOLID',
                  color: '#1B71E5',
                  width: 3,
                };
                data.symbol = JSON.stringify(linesymbol);
              }
            }
          } else {
            data.infowin = null;
          }
          that.dataList.push(data);
        });
      }
      this.isShowContain = false;
    },
    //
    drawMapData() {
      const self = this;
      if (self.dataList.length === 0) {
        setTimeout(() => {
          self.drawMapData();
        }, 300);
      } else {
        self.disableRadio = false;
        self.initMapData(self.dataList, self.layerArray);
      }
      // this.dataList = this.dataList.concat(this.secondTable);
    },
    // 处理后台数据
    async dataDeal() {
      const leftData = await queryFormDataInfo(this.planId);
      // -----屏蔽
      // leftData.data = this.localConfig.ceshi;
      // -----
      console.log('------leftData------', leftData);
      if (leftData.data.success === 'true') {
        this.$emit('form-data', leftData.data);
        if (leftData.data !== undefined) {
          if (leftData.data.success === 'true') {
            if (leftData.data.guanglanxitong) {
              this.ResData.push({
                id: 1,
                title: '光缆系统',
                treeData: leftData.data.guanglanxitong,
                total: leftData.data.guanglanxitong.length,
              });
            }
            if (leftData.data.guandaoxitong) {
              this.ResData.push({
                id: 2,
                title: '管道系统',
                treeData: leftData.data.guandaoxitong,
                total: leftData.data.guandaoxitong.length,
              });
            }
            if (leftData.data.ganluxitong) {
              this.ResData.push({
                id: 3,
                title: '杆路系统',
                treeData: leftData.data.ganluxitong,
                total: leftData.data.ganluxitong.length,
              });
            }
            if (leftData.data.zhimaixitong) {
              this.ResData.push({
                id: 4,
                title: '直埋系统',
                treeData: leftData.data.zhimaixitong,
                total: leftData.data.zhimaixitong.length,
              });
            }
            if (leftData.data.yinshangxitong) {
              this.ResData.push({
                id: 5,
                title: '引上系统',
                treeData: leftData.data.yinshangxitong,
                total: leftData.data.yinshangxitong.length,
              });
            }
            if (leftData.data.guaqiangxitong) {
              this.ResData.push({
                id: 6,
                title: '挂墙系统',
                treeData: leftData.data.guaqiangxitong,
                total: leftData.data.guaqiangxitong.length,
              });
            }
            if (leftData.data.other) {
              this.ResData.push({
                id: 7,
                title: '孤立资源',
                treeData: leftData.data.other,
                total: leftData.data.other.length,
              });
            }
            const isShowRes = leftData.data.alltypes;
            this.resArray[0].isShow = Boolean(isShowRes.renshoujing);
            this.resArray[1].isShow = Boolean(isShowRes.diangan);
            this.resArray[2].isShow = Boolean(isShowRes.biaoshi);
            this.resArray[3].isShow = Boolean(isShowRes.chengdian);
            this.resArray[4].isShow = Boolean(isShowRes.guangjiaojiexiang);
            this.resArray[5].isShow = Boolean(isShowRes.guangfenxianxiang);
            this.resArray[6].isShow = Boolean(isShowRes.guangzhongduanhe);
            this.resArray[7].isShow = Boolean(isShowRes.guangjietouhe);
            this.resArray[8].isShow = Boolean(isShowRes.guandaoduan);
            this.resArray[9].isShow = Boolean(isShowRes.zhimaiduan);
            this.resArray[10].isShow = Boolean(isShowRes.ganluduan);
            this.resArray[11].isShow = Boolean(isShowRes.guaqiangduan);
            this.resArray[12].isShow = Boolean(isShowRes.yinshangduan);
            this.resArray[13].isShow = Boolean(isShowRes.guanglanduan);
          }
        }
      }
    },
    // 左侧树点击返回事件
    onResSelect(id) {
      this.resId = id;
      this.$emit('select-item', id);
    },
    // 监听event-bus中的事件
    initBusListener() {
      this.$bus.on('map-load', ({ vaMapAdv }) => {
        console.log('vaMapAdv', vaMapAdv);
        this.vaMapAdv = vaMapAdv;
        this.drawMapData();
      });
    },
    selected(name) {
      const data = _.find(this.resArray, { resName: name });
      this.labelClick(data, true);
    },
    noselected(name) {
      const data = _.find(this.resArray, { resName: name });
      this.labelClick(data, false);
    },
    labelClick(res, state) {
      for (let index = 0; index < this.resArray.length; index += 1) {
        const element = this.resArray[index];
        if (res.resId === element.resId) {
          this.resArray[index].isSelect = state;
        }
      }
      this.selectResChange = JSON.stringify(res);
    },
    initMapData(dataList, layerArray) {
      this.vaMapAdv.doShowDynamicLayer({
        dataList,
        showTypeList: layerArray,
        extentExpand: 1.5, // 地图显示所有资源时，放大的比例
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.left-tool {
  height: 100%;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;

  .popContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(210, 233, 255, 0.6);
    z-index: 999;
    font-size: 20px;
    display: flex;

    // width: 300px;
    // height: calc(100% - 124px);
    .circle-style {
      border-radius: 50%;
      width: 28px;
      color: #fff;
      height: 28px;
      border: 8px solid currentColor;
      border-left: 8px solid transparent;
      position: relative;
      // margin-right: 6px;
      margin: 6px auto;
      animation: loading 1s infinite linear;
      -moz-animation: loading 1s infinite linear;
      /* Firefox */
      -webkit-animation: loading 1s infinite linear;
      /* Safari 和 Chrome */
      -o-animation: loading 1s infinite linear;
      /* Opera */
    }

    @keyframes loading {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(359deg);
      }
    }

    .text {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      align-self: center;
      width: 100%;
      font-weight: 800;
      color: #ccc;
    }
  }

  .title {
    font-weight: bold;
    color: #7a9ffa;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid #dedede;
    border-top: 1px solid #dedede;
    box-sizing: border-box;
  }

  .switch-style {
    margin: 10px auto;
    flex-direction: row;
    display: flex;
    justify-content: center;
  }

  .label-class {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 12px;
    margin-left: 8px;

    .label-item {
      width: 60px;
      height: 24px;
      border-radius: 5px;
      margin: 4px;
      text-align: center;
    }
  }

  .collapse-style {
    height: calc(100% - 248px);
    overflow: auto;
    flex: 1;
  }

  /*滚动条整体样式*/
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /*滚动条里面小方块*/
  ::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: #ecf0f1;

    &:hover {
      background: #bdc3c7;
    }
  }

  /*滚动条里面轨道*/
  ::-webkit-scrollbar-track {
    border-radius: 8px;
    background: #fafafa;
  }

  /deep/ .el-switch__label {
    position: relative;
    left: -46px;

    /deep/ .el-switch__label * {
      font-size: 10px !important;
    }
  }

  /deep/ .el-switch__core {
    position: relative;
    left: 30px;
  }
}
</style>
